<template>
  <div class="treatment-process">
    <div class="treatment-process_content">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>诊断类型分布情况统计</span>
          <el-popover placement="bottom" title="说明" width="400" trigger="hover">
            <div>考核对象：</div>
            <div>所有卒中病例</div>
            <div>数据取值：</div>
            <div>1.全部病例“急诊诊断”的类型分布和占比情况，科室人员的量取建档数据；</div>
            <div>2.总数=各诊断类型数量，每类数量/总数=该类占比</div>
            <div>3.统计“急诊诊断”为脑梗死、脑出血、颅内动脉瘤、颈动脉狭窄或闭塞、病因未明放弃治疗的病例，未填写计入“未知”</div>
            <div>4.按月统计，1个病例计为1例，无重复计算</div>
            <div>查询筛选：</div>
            <div>时间-年份、季度、月份；</div>
            <div>全院、科室、人员</div>
            <div>默认显示本年</div>
            <i slot="reference" class="el-icon-info" style="color: #42cece;" />
          </el-popover>
        </div>
        <div class="dignosis-content" style="position: relative;">
          <div v-if="Number(sum_getDiagNum) !== 0" style="position: relative;left: 20.5%;">总计：{{ sum_getDiagNum
          }}例
          </div>
          <div id="getDiagNum" style="width: 100%; height: 100%;" />
        </div>
      </el-card>
      <!-- <el-card class="box-card"> -->
      <el-card v-if="dept && dept != '' && isSearch" class="box-card">
        <div slot="header" class="clearfix">
          <span>科室接诊数量统计</span>
          <el-popover placement="bottom" title="说明" width="400" trigger="hover">
            <div>考核对象：</div>
            <div>所有卒中病例</div>
            <div>数据取值：</div>
            <div>1.科室范围为“卒中科室”；</div>
            <div>2.取建档数据；</div>
            <div>3.按月统计，1个病例计1例，无重复计算</div>
            <div>查询筛选：</div>
            <div>时间-年份、季度、月份；</div>
            <div>全院、科室、人员</div>
            <div>默认显示本年</div>
            <div>筛选条件为全院时隐藏，以免误解</div>
            <i slot="reference" class="el-icon-info" style="color: #42cece;" />
          </el-popover>
        </div>

        <div class="dignosis-content" style="position: relative;">
          <div v-if="Number(sum_getDeptDiagNum) !== 0" style="position: relative;left: 48%;">总计:{{
            sum_getDeptDiagNum }}例</div>
          <div id="getDeptDiagNum" style="width: 100%; height: 100%;" />
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>上报数量趋势</span>
          <el-popover placement="bottom" title="说明" width="400" trigger="hover">
            <div>考核对象：</div>
            <div>所有卒中病例</div>
            <div>数据取值：</div>
            <div>1.“建档病例数”为总数，按上报状态，分为“初始填写”和“已下载”</div>
            <div>2.“建档病例数”=“初始填写”+“已下载”的数量，状态数量/总数=该状态占比</div>
            <div>3.按月统计，无重复计算</div>
            <div>查询筛选：</div>
            <div>时间-年份、季度、月份；</div>
            <div>默认显示本年</div>
            <i slot="reference" class="el-icon-info" style="color: #42cece;" />
          </el-popover>
        </div>

        <div class="dignosis-content" style="position: relative;">
          <div id="getUploadNum" style="width: 100%; height: 100%;" />
        </div>
      </el-card>
      <el-card v-if="docList.length <=0" class="box-card">
        <div slot="header" class="clearfix">
          <span>填报量排名</span>
          <el-popover placement="bottom" title="说明" width="400" trigger="hover">
            <div>考核对象：</div>
            <div>所有卒中病例</div>
            <div>数据取值：</div>
            <div>1.取建档人员的科室数据</div>
            <div>2.按月统计，无重复计算"</div>
            <div>查询筛选：</div>
            <div>时间-年份、季度、月份；</div>
            <div>默认显示本年</div>
            <div>搜索科室时隐藏，以免误解</div>
            <i slot="reference" class="el-icon-info" style="color: #42cece;" />
          </el-popover>
        </div>
        <div class="dignosis-content" style="position: relative;">
          <div id="getDeptFillInNumRanking" style="width: 100%; height: 100%;" />
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
import {
  getDeptList,
  getDeptUserList,
  getDiagNum,
  getDeptDiagNum,
  getUploadNum,
  getDeptFillInNumRanking
} from '@/api/statistical/statisticStroke'
export default {
  props: ['preYear', 'preQuarter', 'preMonth', 'preMonthRange', 'preDept', 'preDoc'],
  data() {
    return {
      radioDate: '1',
      year: '',
      quarter: '',
      month: '',
      dept: '',
      doc: '',
      monthRange: [],
      deptList: [],
      docList: [],
      sum_getDiagNum: 0,
      sum_getDeptDiagNum: 0,
      isSearch: false
    }
  },
  mounted() {},
  methods: {
    search() {
      this.year = this.preYear
      this.quarter = this.preQuarter
      this.month = this.preMonth
      this.monthRange = this.preMonthRange
      this.dept = this.preDept
      this.doc = this.preDoc
      this.isSearch = true
      this.initApi()
    },
    reset() {
      this.isSearch = false
      this.radioDate = '1'
      this.year = ''
      this.quarter = ''
      this.month = ''
      this.monthRange = []
      this.dept = ''
      this.doc = ''
      this.docList = ''
      setTimeout(() => {
        this.initApi()
      }, 500)
    },
    changeDate(val) {
      console.log(val)
      if (val == 1) {
        this.monthRange = []
      } else if (val ==
                2) {
        this.year = ''
        this.quarter = ''
        this.month = ''
      }
    },
    getDept() {
      this.deptList = []
      getDeptList({
        hospitalId: this.$store.getters.hospitalId
      }).then(res => {
        if (res.code == 0) {
          if (res.data) {
            if (res.data.deptList && res.data.deptList.length > 0) {
              this.deptList = res.data.deptList
            }
          }
        }
      })
    },
    deptChange(val) {
      this.doc = ''
      this.docList = []
      getDeptUserList({
        hospitalId: this.$store.getters.hospitalId,
        departmentName: val
      }).then(res => {
        if (res.code == 0) {
          if (res.data) {
            if (res.data.deptUserList && res.data.deptUserList.length > 0) {
              this.docList = res.data.deptUserList
            }
          }
        }
      })
    },
    initApi() {
      this.strokeGetDiagNum()
      this.strokeGetDeptDiagNum()
      this.strokeGetUploadNum()
      this.strokeGetDeptFillInNumRanking()
    },
    notHaveData(chart) {
      chart.showLoading({
        text: '暂无数据',
        fontSize: 18,
        left: 'center',
        color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
        textColor: '#000', // 文字颜色
        maskColor: 'rgba(255, 255, 255, 0)' // 背景色
      })
    },
    strokeGetDiagNum() {
      const chartDom = document.getElementById('getDiagNum')
      const myChart = echarts.init(chartDom)
      myChart.clear()
      myChart.hideLoading()
      window.addEventListener('resize', myChart.resize)
      getDiagNum({
        hospitalId: this.$store.getters.hospitalId,
        year: this.year,
        quarter: this.quarter,
        month: this.month,
        startTime: this.monthRange.length > 0 ? this.monthRange[0] : '',
        endTime: this.monthRange.length > 0 ? this.monthRange[1] : '',
        departmentName: this.dept,
        doctorName: this.doc
      }).then(res => {
        if (!res.data) {
          this.notHaveData(myChart)
          return
        }
        this.sum_getDiagNum = res.data.total
        if (!this.sum_getDiagNum || this.sum_getDiagNum === 0) {
          this.notHaveData(myChart)
          return
        }
        let diagMain = []
        const countDiagNGS = res.data.diagNum.countDiagNGS
        const countDiagNCX = res.data.diagNum.countDiagNCX
        const countDiagDML = res.data.diagNum.countDiagDML
        const countDiagJDMXZ = res.data.diagNum.countDiagJDMXZ
        const countDiagGiveUp = res.data.diagNum.countDiagGiveUp
        const countDiagUnknown = res.data.diagNum.countDiagUnknown

        const diagNGS = res.data.diagPercentage.diagNGS
        const diagNCX = res.data.diagPercentage.diagNCX
        const diagDML = res.data.diagPercentage.diagDML
        const diagJDMXZ = res.data.diagPercentage.diagJDMXZ
        const diagGiveUp = res.data.diagPercentage.diagGiveUp
        const diagUnknown = res.data.diagPercentage.diagUnknown
        diagMain = [
          { value: countDiagNGS, name: '脑梗死', rate: diagNGS },
          { value: countDiagNCX, name: '脑出血', rate: diagNCX },
          { value: countDiagDML, name: '颅内动脉瘤', rate: diagDML },
          { value: countDiagJDMXZ, name: '颈动脉狭窄或闭塞', rate: diagJDMXZ },
          { value: countDiagGiveUp, name: '病因未明放弃治疗', rate: diagGiveUp },
          { value: countDiagUnknown, name: '未知', rate: diagUnknown }
        ]

        let option
        option = {
          title: {
            text: '诊断类型分布情况',
            subtext: '',
            left: 'center',
            bottom: 'bottom'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: '20%',
            formatter: name => {
              const nameList = diagMain.filter(item => {
                return item.name === name
              })
              return nameList[0].name + '：' + nameList[0].value + '例 ' + nameList[0].rate + '%'
            }
          },
          series: [
            {
              // name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: diagMain,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        myChart.setOption(option)
      })
    },
    strokeGetDeptDiagNum() {
      if (this.dept === '' && !this.dept) {
        return
      }
      setTimeout(() => {
        const chartDom = document.getElementById('getDeptDiagNum')
        const myChart = echarts.init(chartDom)
        window.addEventListener('resize', myChart.resize)
        myChart.clear()
        getDeptDiagNum({
          hospitalId: this.$store.getters.hospitalId,
          year: this.year,
          quarter: this.quarter,
          month: this.month,
          startTime: this.monthRange.length > 0 ? this.monthRange[0] : '',
          endTime: this.monthRange.length > 0 ? this.monthRange[1] : '',
          departmentName: this.dept,
          doctorName: this.doc
        }).then(res => {
          if (!res.data) {
            this.notHaveData(myChart)
            return
          }
          this.sum_getDeptDiagNum = res.data.total
          if (!this.sum_getDeptDiagNum || this.sum_getDeptDiagNum === 0) {
            this.notHaveData(myChart)
            return
          }
          const diagNGS = res.data.subtotalDiagNum.diagNGS
          const diagNCX = res.data.subtotalDiagNum.diagNCX
          const diagDML = res.data.subtotalDiagNum.diagDML
          const diagJDMXZ = res.data.subtotalDiagNum.diagJDMXZ
          const diagGiveUp = res.data.subtotalDiagNum.diagGiveUp
          const diagUnknown = res.data.subtotalDiagNum.diagUnknown

          const diagNGS_rate = res.data.diagPercentage.diagNGS
          const diagNCX_rate = res.data.diagPercentage.diagNCX
          const diagDML_rate = res.data.diagPercentage.diagDML
          const diagJDMXZ_rate = res.data.diagPercentage.diagJDMXZ
          const diagGiveUp_rate = res.data.diagPercentage.diagGiveUp
          const diagUnknown_rate = res.data.diagPercentage.diagUnknown

          const timeLine = []
          const countDiagNGS = []
          const countDiagNCX = []
          const countDiagDML = []
          const countDiagJDMXZ = []
          const countDiagGiveUp = []
          const countDiagUnknown = []
          res.data.diagNums.forEach(el => {
            timeLine.push(el.year + '-' + el.month)
            countDiagNGS.push(el.countDiagNGS)
            countDiagNCX.push(el.countDiagNCX)
            countDiagDML.push(el.countDiagDML)
            countDiagJDMXZ.push(el.countDiagJDMXZ)
            countDiagGiveUp.push(el.countDiagGiveUp)
            countDiagUnknown.push(el.countDiagUnknown)
          })

          const legendList = [{
            name: '脑梗死',
            value: diagNGS,
            rate: diagNGS_rate
          }, {
            name: '脑出血',
            value: diagNCX,
            rate: diagNCX_rate
          }, {
            name: '颅内动脉瘤',
            value: diagDML,
            rate: diagDML_rate
          }, {
            name: '颈动脉狭窄或闭塞',
            value: diagJDMXZ,
            rate: diagJDMXZ_rate
          }, {
            name: '病因未明放弃治疗',
            value: diagGiveUp,
            rate: diagGiveUp_rate
          }, {
            name: '未知',
            value: diagUnknown,
            rate: diagUnknown_rate
          }]
          const option = {
            color: ['#027DB4', '#F59A23', '#E2596A', '#5EAFAF', '#008B8B', '#D4F2E7'],
            title: {
              text: '',
              subtext: '',
              left: 'center'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              // orient: 'vertical',
              // right: 0,
              top: '20px',
              formatter: name => {
                const legendData = legendList.filter(item => {
                  return item.name == name
                })
                return legendData[0].name + '：' + legendData[0].value + '例 ' + legendData[0].rate + '%'
              }
            },
            grid: {
              top: 60
            },
            xAxis: {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              data: timeLine
            },
            yAxis: {
              name: '例',
              type: 'value'
            },
            series: [{
              name: '脑梗死',
              type: 'bar',
              barWidth: 20,
              label: {
                show: true,
                position: 'top'
              },
              data: countDiagNGS
            }, {
              name: '脑出血',
              type: 'bar',
              barWidth: 20,
              label: {
                show: true,
                position: 'top'
              },
              data: countDiagNCX
            }, {
              name: '颅内动脉瘤',
              type: 'bar',
              barWidth: 20,
              label: {
                show: true,
                position: 'top'
              },
              data: countDiagDML
            }, {
              name: '颈动脉狭窄或闭塞',
              type: 'bar',
              barWidth: 20,
              label: {
                show: true,
                position: 'top'
              },
              data: countDiagJDMXZ
            }, {
              name: '病因未明放弃治疗',
              type: 'bar',
              barWidth: 20,
              label: {
                show: true,
                position: 'top'
              },
              data: countDiagGiveUp
            }, {
              name: '未知',
              type: 'bar',
              barWidth: 20,
              label: {
                show: true,
                position: 'top'
              },
              data: countDiagUnknown
            }
            ]
          }
          myChart.setOption(option)
        })
      }, 500)
    },
    strokeGetUploadNum() {
      const chartDom = document.getElementById('getUploadNum')
      const myChart = echarts.init(chartDom)
      window.addEventListener('resize', myChart.resize)
      myChart.clear()
      getUploadNum({
        hospitalId: this.$store.getters.hospitalId,
        year: this.year,
        quarter: this.quarter,
        month: this.month,
        startTime: this.monthRange.length > 0 ? this.monthRange[0] : '',
        endTime: this.monthRange.length > 0 ? this.monthRange[1] : '',
        departmentName: this.dept,
        doctorName: this.doc
      }).then(res => {
        if (!res.data) {
          this.notHaveData(myChart)
          return
        }

        const timeLine = []
        const numNotUpload = []
        const numUploaded = []
        const numFillIn = []
        const total_data = res.data.total
        const notUpload = res.data.subtotalUpload.notUpload
        const uploaded = res.data.subtotalUpload.uploaded
        const notUpload_rate = res.data.uploadPercentage.notUpload
        const uploaded_rate = res.data.uploadPercentage.uploaded
        const legendList = [
          {
            name: '建档病例数',
            value: total_data,
            rate: ''
          }, {
            name: '初始填写',
            value: notUpload,
            rate: notUpload_rate
          }, {
            name: '已下载',
            value: uploaded,
            rate: uploaded_rate
          }]
        res.data.uploadNums.forEach(el => {
          timeLine.push(el.year + '-' + el.month)
          numNotUpload.push(el.numNotUpload)
          numUploaded.push(el.numUploaded)
          numFillIn.push(el.numFillIn)
        })
        const option = {
          color: ['#027DB4', '#F59A23', '#E2596A', '#5EAFAF', '#008B8B', '#D4F2E7'],
          title: {
            text: '',
            subtext: '',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            // orient: 'vertical',
            // right: 0,
            top: '20px',
            formatter: name => {
              const legendData = legendList.filter(item => {
                return item.name == name
              })

              return legendData[0].name + '：' + legendData[0].value + '例 ' + (legendData[0].rate ? '' + legendData[0].rate + '%' : '')
            }
          },
          grid: {
            top: 60
          },
          xAxis: {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: timeLine
          },
          yAxis: {
            name: '例',
            type: 'value'
          },
          series: [{
            name: '建档病例数',
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top'
            },
            data: numFillIn
          }, {
            name: '初始填写',
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top'
            },
            data: numNotUpload
          }, {
            name: '已下载',
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top'
            },
            data: numUploaded
          }
          ]
        }
        myChart.setOption(option)
      })
    },
    strokeGetDeptFillInNumRanking() {
      const chartDom = document.getElementById('getDeptFillInNumRanking')
      const myChart = echarts.init(chartDom)
      window.addEventListener('resize', myChart.resize)
      myChart.clear()
      getDeptFillInNumRanking({
        hospitalId: this.$store.getters.hospitalId,
        year: this.year,
        quarter: this.quarter,
        month: this.month,
        startTime: this.monthRange.length > 0 ? this.monthRange[0] : '',
        endTime: this.monthRange.length > 0 ? this.monthRange[1] : '',
        departmentName: this.dept,
        doctorName: this.doc
      }).then(res => {
        console.log(res.data)
        if (!res.data) {
          this.notHaveData(myChart)
          return
        }

        if (res.data.deptFillInNums.length === 0) {
          this.notHaveData(myChart)
          return
        }
        const deptName = []
        const fillInNum = []
        res.data.deptFillInNums.forEach(el => {
          deptName.push(el.deptName)
          fillInNum.push(el.fillInNum)
        })
        const option = {
          color: ['#027DB4', '#F59A23'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            name: '例',
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: deptName
          },
          series: [
            {
              name: '2011',
              type: 'bar',
              barWidth: 20,
              label: {
                show: true,
                position: 'right'
              },
              data: fillInNum
            }
          ]
        }
        myChart.setOption(option)
      })
    }
  }

}
</script>

<style lang="less" scoped>
.treatment-process {
    width: 100%;
    height: 100%;

    &_content {
        height: calc(100% - 59px);
        overflow-y: auto;
    }

    .dignosis-content {
        width: 100%;
        height: 400px;
        display: inline-block;

        .dignosis-style {
            display: inline-block;
            width: 50%;
            height: 100%;
        }
    }

    .treatment-process-card {
        height: 400px;
    }

    .box-card+.box-card {
        margin-top: 5px;
    }

    /deep/.el-radio__label {
        line-height: 38px;
    }
}
</style>
